<!-- 支付结果页 -->
<template>
	<view class="success-page">

		<!-- 商品结果页 -->
		<template v-if="orderType==='goods'">
			<view class="success-box u-flex-col u-row-center u-col-center">
        <view class="u-flex u-col-bottom">
          <image class="pay-img" :src="payImg[payState]" mode=""></image>
          <text class="notice">{{ payText[payState] }}</text>
        </view>
				<text class="pay-money"
					v-if="payState === 'success' && orderDetail.total_fee">实付 ￥{{ orderDetail.total_fee }}</text>
				<view class="btn-box u-flex u-row-between">
					<block
						v-if="payState === 'success' && orderDetail.activity_type === 'groupon' && orderDetail.ext_arr.buy_type === 'groupon'">
						<button class="u-reset-button base-btn" v-if="orderDetail.ext_arr.groupon_id > 0"
							@tap="$Router.replace({ path: '/pages/activity/groupon/detail', query: { id: orderDetail.ext_arr.groupon_id } })">
							拼团详情
						</button>
						<button class="u-reset-button base-btn" v-else
							@tap="$Router.push('/pages/activity/groupon/my-groupon')">我的拼团</button>
					</block>

					<button class="u-reset-button base-btn" v-else
						@tap="$Router.pushTab('/pages/index/index')">返回首页</button>


					<button class="u-reset-button base-btn u-m-l-10 u-m-r-10"
						@tap="$Router.replace({ path: '/pages/order/detail', query: { id: orderDetail.id } })">查看订单</button>
					<button class="u-reset-button again-pay " v-show="payState === 'fail'" @tap="onPay">重新支付</button>
				</view>
			</view>
		</template>

		<template v-if="orderType==='recharge'">
			<view class="success-box u-flex-col u-row-center u-col-center">
				<image class="pay-img" :src="payImg[payState]" mode=""></image>
				<text class="notice">{{ payText[payState] }}</text>
				<text class="pay-money"
					v-if="payState === 'success' && orderDetail.total_fee">实付 ￥{{ orderDetail.total_fee }}</text>
				<view class="btn-box u-flex u-row-between">

					<button class="u-reset-button base-btn" @tap="$Router.pushTab('/pages/index/index')">返回首页</button>
					<button v-if="payState === 'fail'" class="u-reset-button again-pay" @tap="onPay">重新支付</button>
					<button v-else class="u-reset-button base-btn"
						@tap="$Router.pushTab('/pages/index/user')">个人中心</button>

				</view>
			</view>
		</template>

    <view class="pay-slogan">
      <view class="tit">以诚载物，让远方的心意触手可及</view>
      <view class="desc">您的订单已支付成功，我们正快马加鞭为您准备产品，请注意查收！</view>
    </view>

    <view class="recmd-goods" v-if="recmd_goods.length>0">
      <view class="recmd-lists">
        <view class="recmd-item" v-for="f in recmd_goods" :key="f.id" @tap="$Router.push({ path: '/pages/goods/detail', query: { id: f.id } })">
          <view class="image">
            <image class="goods_img" lazy-load fade-show :src="f.image" mode="widthFix"></image>
          </view>
          <view class="title">{{ f.title }}</view>
          <view class="u-flex u-col-center u-m-t-20 u-row-between">
            <view class="u-flex u-col-bottom">
              <view class="price u-m-r-10">{{ f.price }}</view>
              <view class="qi">起</view>
              <view class="origin-price">{{ parseInt(f.original_price) }}</view>
            </view>
            <view>
              <image class="cart" src="https://yz-mrzq.oss-cn-shenzhen.aliyuncs.com/imgs/other/index/cart-orange.png"></image>
            </view>
          </view>
        </view>
      </view>
    </view>


	</view>
</template>

<script>
	import Pay from '@/shopro/pay';
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	let payTimer = null;
	const payCount = 5;
	export default {
		components: {},
		data() {
			return {
				showModal: false,
				messageType: '',
				templateIds: [],
				wxOpenTags: '',
				orderDetail: {}, //订单详情
				orderType: '', //订单类型
				payText: {
					fail: '支付失败',
					success: '支付成功',
					paying: '查询中...'
				},
				payImg: {
					fail: this.$IMG_URL + '/imgs/other/pay/pay-no.png',
					success: this.$IMG_URL + '/imgs/other/pay/pay-yes.png',
					paying: this.$IMG_URL + '/imgs/other/pay/pay-yes.png'
				},
				payState: '', //支付状态
        recmd_goods : [],
			};
		},
		computed: {
			...mapGetters(['subscribeMessageIdsMap'])
		},
		onLoad() {
			this.payState = this.$Route.query.payState ? this.$Route.query.payState : 'paying';
			this.orderType = this.$Route.query.orderType
			this.$Route.query.orderId && this.getOrderDetail();
			switch (this.payState) {
				case 'success':
					this.getCartList();
					break;
				case 'fail':
					break;
				case 'paying':
					this.checkTimer();
					break;
				default:
					break;
			}
      this.getRecmdList();
		},
		onHide() {
			clearInterval(payTimer);
			payTimer = null;
		},
		methods: {
			...mapActions(['getCartList']),

			// 订阅消息
			onConfirm() {
				//  #ifdef MP-WEIXIN
				this.templateIds.length && this.$store.commit('subscribeMessage', this.messageType);
				//  #endif
			},

			// 获取订单详情
			getOrderDetail() {
				switch (this.$Route.query.orderType) {
					case 'goods':
						this.getGoodsOrderDetail()
						break;
					case 'recharge':
						this.getRechargeOrderDetail()
						break;
					default:
						break;
				}
			},

			// 支付订单信息
			getGoodsOrderDetail() {
				let that = this;
				that.$http('order.detail', {
					id: that.$Route.query.orderId
				}).then(async res => {
					if (res.code === 1) {
						that.orderDetail = res.data;
						if (res.data.status > 0) {
							this.messageType = this.orderDetail.activity_type == 'groupon' ? 'grouponResult' :
								'result';
							//  #ifdef MP-WEIXIN
							this.templateIds = this.subscribeMessageIdsMap[this.messageType];
							this.showModal = this.templateIds.length;
							//  #endif
						}
					}
				});
			},

			// 充值订单信息
			getRechargeOrderDetail() {
				let that = this;
				that.$http('money.rechargeDetail', {
					id: that.$Route.query.orderId
				}).then(res => {
					if (res.code === 1) {
						that.orderDetail = res.data;
						if (res.data.status > 0) {
							this.messageType = 'result';
						}
					}
				});
			},

			// 支付倒计时
			checkTimer() {
				let that = this;
				let count = 0;
				that.payState = 'paying';
				payTimer = setInterval(() => {
					count++;
					if (count < payCount) {
						that.checkPay();
					} else {
						clearInterval(payTimer);
						that.payState = 'fail';
					}
				}, 800);
			},

			// 检测支付
			async checkPay() {
				let that = this;
				let paiMap = {
					'goods': 'order.detail',
					'recharge': 'money.rechargeDetail'
				}
				let res = await that.$http(
					paiMap[that.orderType], {
						id: that.$Route.query.orderId
					},
					false
				);
				if (res.code === 1 && res.data.status > 0) {
					that.payState = 'success';
					clearInterval(payTimer);
				}
			},

			// 重新支付
			onPay() {
				let that = this;
				let pay = new Pay(that.$Route.query.type, that.orderDetail, that.orderType);
			},

      // 好物推荐
      async getRecmdList() {
        let that = this;
        that.$http('goods.lists_all', {
          category_id : 164
        }).then(res => {
          if (res.code === 1) {
            that.recmd_goods = res.data;
          }
        });
      }
		}
	};
</script>

<style lang="scss" scopeds>
	.success-box {
    background-image: url('https://yz-mrzq.oss-cn-shenzhen.aliyuncs.com/imgs/other/pay/pay-success-tool.png');
		background-color: #f5dabf;
    background-size: 100% 100%;
		width: 750rpx;
		padding: 100rpx 0;
    border-radius: 30rpx;

		.pay-img {
			width: 50rpx;
			height: 50rpx;
      margin-right: 20rpx;
		}

		.notice {
      color:#fe952b;
			font-size: 38rpx;
			font-weight: bold;
		}

		.pay-money {
			font-size: 36rpx;
			color: #fe952b;
			margin-top: 20rpx;
		}

		.btn-box {
			margin-top: 30rpx;
			width: 450rpx;

			.base-btn {
				width: 200rpx;
				line-height: 60rpx;
				border: 1rpx solid #fe952b;
				border-radius: 35rpx;
				font-size: 28rpx;

				color: #fe952b;
				padding: 0;
			}

			.again-pay {
				width: 200rpx;
				line-height: 60rpx;

				border-radius: 35rpx;
				font-size: 28rpx;

        color: #fe952b;
				padding: 0;
			}
		}
	}

	.hot-box {
		background: #fff;
		padding: 20rpx;
		margin-top: 20rpx;

		.hot-title {
			font-size: 30rpx;

			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			height: 80rpx;
		}
	}

  .pay-slogan{
    background-image: url('https://yz-mrzq.oss-cn-shenzhen.aliyuncs.com/imgs/other/pay/pay-success-slogan.png');
    background-size: 100% 100%;
    width: 600rpx;
    height: 150rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin: -50rpx auto 0 auto;
    border-radius: 20rpx;
    .tit{
      font-size: 28rpx;
    }
    .desc{
      margin-top: 20rpx;
      color: #777;
      font-size: 18rpx;
    }
  }

  .recmd-goods{
    width: 700rpx;
    margin: 20rpx auto 0 auto;
    border-radius: 10rpx;
    border: 4rpx solid #ffcf9e;
    background: linear-gradient(to bottom,#ffcf9f,#fff,#fff,#fff);
    color: #555;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .recmd-lists{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 30rpx;
      padding: 30rpx;
      padding-bottom: 0;
      .recmd-item{
        width: 300rpx;
        background: #fff;
        box-shadow: 5rpx 5rpx 8rpx #ffd09f;
        border-radius: 10rpx;
        overflow: hidden;
        padding: 0 7rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        .image{
          width: 300rpx;
          height: 300rpx;
        }
        .title{
          margin-top: 20rpx;
          font-size: 18rpx;
          height: 26rpx;
          overflow: hidden;
        }
        .price{
          color: $u-type-error;
          font-size: 20rpx;
          &::before {
            content: '￥';
            font-size: 16rpx;
          }
        }
        .qi{
          color: $u-type-info-disabled;
          font-size: 16rpx;
          margin-right: 5rpx;
        }
        .origin-price{
          color: $u-type-info-disabled;
          font-size: 16rpx;
          text-decoration: line-through;
        }
        .cart{
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }
</style>
